<template>
  <div class="category">
    <el-form>
      <el-form-item
        label="一级分类:"
        label-width="80"
        v-if="primaryCategory.length > 0"
      >
        <div class="tag">
          <span
            :class="[primaryCategoryId == primaryCategory.id ? 'active' : '']"
            v-for="primaryCategory in primaryCategory"
            :key="primaryCategory.id"
            @click="initCategory(primaryCategory.id, $event)"
          >
            {{ primaryCategory.categoryName }}
          </span>
        </div>
      </el-form-item>
      <el-form-item
        label="二级分类:"
        label-width="80"
        v-if="childCategory.length > 0"
      >
        <div class="tag">
          <span
            v-for="childCategory in childCategory"
            :key="childCategory.id"
            :class="[childCategory.status ? 'active' : '']"
            @click="handlerChildCategory(childCategory)"
          >
            {{ childCategory.categoryName }}
          </span>
        </div>
      </el-form-item>
      <el-form-item label="三级标签:" label-width="80" v-if="labels.length > 0">
        <div class="tag">
          <span
            v-for="label in labels"
            :key="label.id"
            :class="[label.status ? 'active' : '']"
            @click="handlerLabels(label)"
          >
            <el-tooltip :content="label.categoryName" placement="top">
              {{ label.labelName }}
            </el-tooltip>
          </span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {
  queryPrimaryCategory,
  queryCategoryByPrimary,
} from "@/api/subject/subject";
import { reqQueryLabelByPrimaryCategoryId } from "@/api/subject/label";
import { onMounted, ref } from "vue";

const props = defineProps([
  "handlerCategoryIds",
  "handlerLabelIds",
  "categoryIds",
  "labelIds",
]);

onMounted(() => {
  // 获取分类标签
  initCategory();
});

// 一级分类数据
const primaryCategory = ref([]);
// 二级分类数据
const childCategory = ref([]);
// 三级标签数据
const labels = ref([]);
// 存放一级分类Id  --- 样式切换和查询二级分类 三级标签时候需要使用到
const primaryCategoryId = ref();
// 存放二级分类Id --- 传递给父组件
const childCategoryIds = ref([]);
// 存放三级标签Id --- 传递给父组件
const labelIds = ref([]);

// 初始化分类标签
const initCategory = (id, e) => {
  // 一级分类
  const primaryData = { categoryType: "1" };
  queryPrimaryCategory(primaryData).then((res) => {
    if (res.code == 200) {
      primaryCategory.value = res.data;
      // 切换分类
      if (!id) {
        // 没有传那么说明是在初始化
        primaryCategoryId.value = res.data[0].id;
      } else {
        // 传了id说明在切换分类, 将原有的id先清空
        childCategoryIds.value = [];
        labelIds.value = [];
        primaryCategoryId.value = id;
      }
      // 获取二级分类
      const childData = {
        categoryType: "2",
        parentId: primaryCategoryId.value,
      };
      queryCategoryByPrimary(childData).then((childRes) => {
        if (childRes.code == 200) {
          childCategory.value = childRes.data;
          /**
           * 只有当用户为修改题目信息时，才会进入这个逻辑
           * props.categoryIds 是父组件传过来的，存放的是该题目信息的二级分类id
           * 给该二级分类id做高亮显示
           */
          if (props.categoryIds.length > 0) {
            props.categoryIds.forEach((id) => {
              childCategory.value.forEach((category) => {
                if (category.id == id) {
                  category.status = true;
                }
              });
            });
          }
        }
      });
      // 获取三级标签  根据一级分类的Id
      reqQueryLabelByPrimaryCategoryId(primaryCategoryId.value).then(
        (labelRes) => {
          if (labelRes.code == 200) {
            labels.value = labelRes.data;
            /**
             * 只有当用户为修改题目信息时，才会进入这个逻辑
             * props.labelIds 是父组件传过来的，存放的是该题目信息的三级标签id
             * 给该三级标签id做高亮显示
             */
            if (props.labelIds.length > 0) {
              props.labelIds.forEach((id) => {
                labels.value.forEach((label) => {
                  if (label.id == id) {
                    label.status = true;
                  }
                });
              });
            }
          }
        }
      );
    }
  });
};

// 收集二级分类Id和修改标签样式
const handlerChildCategory = (category) => {
  // 判断当前标签是否已经处于高亮，如果处于高亮，用户点击则取消高亮
  if (category.status) {
    category.status = false;
    // 将高亮置反后遍历二级分类Id，如果数组中存在该id，那么需要删除该id
    childCategoryIds.value.forEach((categoryId, index) => {
      if (categoryId == category.id) {
        childCategoryIds.value.splice(index, 1);
      }
    });
  } else {
    // 当前标签高亮展示
    category.status = true;
    // 收集高亮标签Id
    childCategoryIds.value.unshift(category.id);
  }

  props.handlerCategoryIds(childCategoryIds.value);
};

// 收集三级标签Id和修改标签样式
const handlerLabels = (label) => {
  // 判断当前标签是否已经处于高亮，如果处于高亮，用户点击则取消高亮
  if (label.status) {
    label.status = false;
    // 将高亮置反后遍历三级标签Id，如果数组中存在该id，那么需要删除该id
    labelIds.value.forEach((labelId, index) => {
      if (labelId == label.id) {
        labelIds.value.splice(index, 1);
      }
    });
  } else {
    // 当前标签高亮展示
    label.status = true;
    // 收集高亮标签Id
    labelIds.value.unshift(label.id);
  }
  props.handlerLabelIds(labelIds.value);
};
</script>

<style scoped lang="scss">
.tag {
  span {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 15px;
    border: 1px solid #ccc;
    margin: 0 5px;
    cursor: pointer;
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.4s;
    text-align: center;
    margin-bottom: 10px;
  }
  span.active {
    color: rgba(36, 111, 215, 0.698);
    border: 1px solid rgb(157, 185, 227);
  }
}
</style>